<template>
  <div class="swiper-container">
    <swiper :options="swiperOption" ref="mySwiper" id="mySwiper">
      <!--必须的组件-->
      <!--每页幻灯片使用swiper-slide标签-->
      <!--幻灯片组件生成的标签自带.swiper-slide的类名，但单类名选择器设置的部分css(如宽高)将被覆盖-->
      <swiper-slide class="swiper_slide_item_img">
        <img class="swiper-img" src="/img/swiper/swiper.png" alt="swiper" style="height: 100%; width: 100%; object-fit: fill" />
      </swiper-slide>
      <swiper-slide class="swiper_slide_item_img">
        <img class="swiper-img" src="/img/swiper/swiper2.png" alt="swiper2" style="height: 100%; width: 100%; object-fit: fill" />
      </swiper-slide>

      <!-- 可选的控件 -->
      <!--分页器-->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'photoSwiper',
  data() {
    return {
      //swiperOption：swiper配置项信息，需要绑定在swiper标签的 :option 属性中
      swiperOption: {
        //幻灯片放映方向
        direction: 'horizontal',

        //分页器配置项
        pagination: {
          el: '.swiper-pagination', //分页器的类名
          clickable: true, // 点击分页器跳切换到相应的幻灯片
          type: 'custom', //小圆点|进度条|数字页码
          //自定义分页器，需设置样式
          renderBullet(index, className) {
            return '';
          }
        },
        //幻灯片播放配置项
        loop: true, //是否循环播放
        speed: 1000, // 发生页面切换动画时，动画的切换速度
        autoplay: {
          delay: 2000 // 幻灯片停留时间
        }
      }
    };
  },
  //计算属性
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  }
};
</script>

<style scoped lang="scss">
#mySwiper {
  height: 100%;
  width: 100%;
}
.img-container {
  height: 100%;
  width: 100%;
  position: relative;
}
.swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-slide {
  .swiper_slide_item_img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .swiper-img {
      width: 100%;
      height: 100%;
      object-fit: cover !important;
    }
  }
}
</style>
